<template>
  <div class="linechart moneyline" style="height:30rem;opacity:1;" />
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import { AjaxToken } from "@/api/common";
import { AjaxGet } from "@/api/common";
import { Loading } from "element-ui";
import "url-search-params-polyfill";

export default {
  mixins: [resize],
  props: {
    CpnID: "",
    ChnanelId: "",
    selectType: 0,
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    selectType: {
      deep: true,
      handler(val) {
        this.chart.dispose();
        this.initChart();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",

        target: document.querySelector(".moneyline"),
      });
      backstage.GetMoneyLinkRatio(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetMoneyLinkRatio: function (thisobj, params, loading) {
   setTimeout(function(){
     AjaxToken(
      thisobj,
      "GetMoneyLinkRatio",
      params,
      "post",
      function (res) {
        loading.close();
        var result = res.data.data;
        var linedata_x = result[0].linedata_x;
        var chartdatas = result;
        var legenddata = [];
        result.forEach((element) => {
          legenddata.push(element.name);
        });
        var option = {
          title: {
            text: "交易金额同比曲线",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: legenddata,
            orient: "vertical",
            left: "right",
            top: "20%",
          },
          grid: {
            left: "1%",
            right: "8%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          backgroundColor: "white",
          xAxis: {
            type: "category",
            boundaryGap: false, // 坐标轴两边留白
            data: linedata_x,
            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: "#1B253A",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4; // 一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
              // rotate:50,
            },
            axisTick: {
              // 坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {
              // 坐标轴轴线相关设置
              lineStyle: {
                color: "#E5E9ED",
                // opacity:0.2
              },
            },
            splitLine: {
              // 坐标轴在 grid 区域中的分隔线。
              show: false,
              lineStyle: {
                color: "#E5E9ED",
                // 	opacity:0.1
              },
            },
          },
          yAxis: [
            {
              type: "value",
              name: "单位（元）",
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 12,
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#E5E9ED",
                  // 	opacity:0.1
                },
              },
            },
          ],
          series: [
            {
              name: chartdatas[0].name,
              type: "line",
              itemStyle: {
                normal: {
                  color: "rgba(255, 196, 1, 1)",
                  lineStyle: {
                    color: "rgba(255, 196, 1, 1)",
                    width: 1,
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(255, 196, 1, 0)",
                      },
                      {
                        offset: 1,
                        color: "rgba(255, 196, 1, 0.35)",
                      },
                    ]),
                  },
                },
              },
              data: chartdatas[0].data,
            },
            {
              name: chartdatas[1].name,
              type: "line",
              itemStyle: {
                normal: {
                  color: "rgba(26, 180, 72, 1)", // 曲线颜色
                  lineStyle: {
                    color: "rgba(26, 180, 72, 1)",
                    width: 1,
                  },
                  areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(26, 180, 72, 0)", // 主色
                      },
                      {
                        offset: 1,
                        color: "rgba(26, 180, 72, 0.35)", // 渐变色
                      },
                    ]),
                  },
                },
              },
              data: chartdatas[1].data,
            },
          ],
        };
        thisobj.chart.setOption(option);
      },
      function (err) {}
    )
   },5*1000)
  },
};
</script>
<style lang="scss" scoped>
</style>
